<!-- 排行榜页面 -->
<style scoped>
.child {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    height: 8vh;
    background-color: white;
    justify-content: space-around;
    font-size: 12px;
}

.child-child {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.child-child-img {
    width: 20px;
    height: 20px;
}

* {
    margin: 0;
    padding: 0;
}

.top-img {
    width: 100%;
    height: 30vh;
}

body {
    background-color: #F4F4F4;
}

/* 中间内容 */
.left-img {
    width: 45%;
    position: relative;
    height: 100px;
}

.list {
    width: 100%;
    height: auto;
    padding-bottom: 30vh;
}

.list-child {
    padding-top: 6.6px;
    padding-bottom: 6.6px;
    padding-left: 6.6px;
    width: 96%;
    margin-left: 1%;
    background-color: white;
    margin-top: 6.6px;
    display: flex;
}

/* 星星 */
.xingx {
    display: flex;
    width: 2.5vh;
    height: 2.5vh;
}

.local {
    display: flex;
    font-size: 11px;
}

.child-right {
    display: flex;
    flex-direction: column;
    padding-left: 2vh;
    line-height: 32.5px;
    margin-top: -6.6px;
}

/* 距离 */
.lo {
    padding-left: 2vh;
}

.bold {
    font-weight: 900;
    font-size: 17px;
}

.wang {
    background-color: #DED796;
    color: rgba(152, 141, 41, 1);
    width: 20vh;
    height: 3vh;
    line-height: 2vh;
    border-radius: 2vh;
    padding-bottom: 0.5vh;
    text-align: center;
    padding-top: 0.5vh;
    font-size: 12px;
}

.duo {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    bottom: 13vh;
    justify-content: center;
}

/* <!-- 底部导航栏 --> */


.img-io {
    position: absolute;
    width: 32.5px;
    height: 32.5px;
    left: 6.6px;
}


.rocket {
    width: 32.5px;
    height: 32.5px;
    z-index: 9999;

}

.backo {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    margin-top: -32.5px;
    position: absolute;
    box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 1);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -32.5px;

}

.child-right {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-top: 6.6px;
    padding-bottom: 6.6px;
    padding-left: 2vh;
    padding-right: 2vh;
}

.backo img {
    width: 50px;
    height: 50px;
    position: absolute;
}
</style>

<template>
    <div class="box">
        <!-- 上背景图 -->
        <img src="../assets/img17516818accc12e58.jpg" alt="" class="top-img" />
        <!-- 中间内容 -->
        <div class="list">
            <div class="list-child">
                <img src="../assets/img17031018abd543ca8.jpg" alt="" class="left-img" />
                <img src="../assets/img17121418ac23ded68.png" alt="" class="img-io" />
                <div class="child-right">
                    <div class="bold">五龙山野生动物王国</div>
                    <div class="xing">
                        <div class="xingx">
                            <img src="../assets/xingxing.png" alt="" />
                            <img src="../assets/xingxing.png" alt="" />
                            <img src="../assets/xingxing.png" alt="" />
                            <img src="../assets/xingxing.png" alt="" />
                            <!-- <van-rate v-model="value"  :size="25" color="#ffd21e" void-icon="star" void-color="#eee" /> -->
                            <img src="../assets/ban.png" alt="" />
                        </div>
                    </div>
                    <div class="local">
                        辉县
                        <div class="lo">距离10km</div>
                    </div>
                    <div class="wang">动物园王国</div>
                </div>
            </div>
            <div class="list-child" v-for="(item, index) in recommend" :key="item.id" @click="scenic_area()">
                <img :src="`https://wwz.jingyi.icu${item.img}`" alt="" class="left-img" />
                <div class="child-right">
                    <div class="bold">{{ item.name }}</div>
                    <div class="xing">
                        <div class="xingx">
                            <img src="../assets/xingxing.png" alt="" />
                            <img src="../assets/xingxing.png" alt="" />
                            <img src="../assets/xingxing.png" alt="" />
                            <img src="../assets/xingxing.png" alt="" />
                            <!-- <van-rate v-model="value"  :size="25" color="#ffd21e" void-icon="star" void-color="#eee" /> -->
                            <img src="../assets/ban.png" alt="" />
                        </div>
                    </div>
                    <div class="local">
                        {{ item.label }}
                        <div class="lo">距离10km</div>
                    </div>
                    <div class="wang">{{ item.label }}</div>
                </div>
            </div>
            <!-- 底部 -->
            <!-- <div class="duo">没有更多了</div> -->

            <div class="child">

                <div class="child-child" @click="home">
                    <img src="../assets/home2.png" alt="" class="child-child-img" />
                    <div>首页</div>
                </div>
                <div class="child-child" @click="Strategy_jump">
                    <img src="../assets/iii.svg" alt="" class="child-child-img" />
                    <div>攻略</div>
                </div>
                <div class="child-child">
                    <transition name="rocket">
                        <!-- <div class="bzcko_fei"></div> -->
                        <div class="backo" v-if="showRocket">
                            <!-- 这里原本可能有一些内容，比如火箭的图片 -->
                            <img src="../assets/xhj.png" @click="launchRocket" class="rockett" alt="Rocket">
                        </div>
                    </transition>
                    <img src="../assets/fa.png" alt="" class="child-child-img" />
                    <div>发布</div>
                </div>
                <div class="child-child">
                    <img src="../assets/hhhhjjjjj.png" alt="" class="child-child-img" />
                    <div style="color: red;">排行榜</div>
                </div>
                <div class="child-child" @click="my">
                    <img src="../assets/my.png" alt="" class="child-child-img" />
                    <div>我的</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, reactive } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import { Scenic } from "../api/home";
const showRocket = ref(true); // 控制火箭是否显示的变量 
// 推荐景区接口
const recommend = ref([]);
Scenic().then(res => {
    console.log(res);
    recommend.value = res.data;
    console.log(recommend.value, '123');
})
// 跳转到首页
const home = () => {
    router.push({
        name: "home",
    });
}
// 跳转到攻略
const Strategy_jump = () => {
    router.push({
        name: "Strategy",
    });
}
// 跳转到我的
const my = () => {
    router.push({
        name: "me"
    })
}
// 定义方法  
const launchRocket = () => {
    // 开始动画  
    showRocket.value = false; // 通过改变数据触发过渡效果  
    // 延迟 1 秒后跳转至 Login 组件（注意：通常我们不会直接跳转到 .vue 文件，而是使用 Vue Router）  
    setTimeout(() => {
        router.push('/review') 
        // router.push({
        //     name: "/review"
        // })
        // 假设你使用了 Vue Router，这里的逻辑需要替换为你实际的导航逻辑  
        // 例如，你可以使用 router.push('/login')  
        // 假设你没有使用 Vue Router，你可能需要继续使用 window.location，但这并不是 Vue 的标准做法  
        // window.location.href = '/review'; // 注意这里通常是 URL 路径，而不是 .vue 文件  
    }, 1000); // 假设过渡效果在 1 秒内完成  
};
// 如果有需要，可以在这里添加生命周期钩子  
// 例如，onMounted 会在组件挂载后执行  
onMounted(() => {
    // 组件挂载后的代码  
});
</script>